<!-- 数据云图 -->
<template>
  <div >
    <h2>关键词条</h2>
    <div ref="target" class="chart8"></div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch, defineProps } from 'vue'
import * as echarts from 'echarts'
import 'echarts-wordcloud'

const props = defineProps({
  data: {
    typeof: Object,
    required: true,
  }
})

// 1. 初始化 echarts 实例
let mChart = null
const target = ref(null)

onMounted(() => {
  mChart = echarts.init(target.value)
  renderChart()
})

const randomRGB = () => {
  const r = Math.floor(Math.random() * 255)
  const g = Math.floor(Math.random() * 255)
  const b = Math.floor(Math.random() * 255)
  return `rgb(${r},${g},${b})`
}

// 2. 构建 option 配置对象 
const renderChart = () => {
  const options = {
    // 核心配置 
    series: [
      {
        type: 'wordCloud',
        sizeRange: [8, 46],
        rotationRange: [0, 0],
        gridSize: 0,
        layoutAnimation: true,
        textStyle: {
          color: randomRGB
        },
        data: props.data.datas,
        emphasis: {
          textStyle: {
            fontWeight: 'bold',
            color: '#000'
          }
        }
      }
    ]
  }
  // 3. 通过 实例.setOptions(option)
  mChart.setOption(options)
  // 让echarts根据浏览器大小改变动态该改变
  window.onresize = () => {//自适应大小
    mChart.resize()
  }
}

watch(() => props.data, renderChart)
</script>
<style lang="less" scoped>
h2 {
  height: .5rem;
  line-height: .5rem;
  text-align: center;
  // background-color: pink;
}

.chart8 {
  width: 100%;
  height: 3.75rem;
}
</style>